<style>
#keyNumTab tr td input[type=button]{
	padding: 20px 47px 20px 47px;
	font-size: 36px;
}
</style>

<script>

var valKbN = 0;
var idElm  = 0;
var msgBtn = "";

function resetPassword()
{
	$("#kuserNumberTxt").removeAttr("disabled");
	$("#btn_login").removeAttr("disabled");
	$("#btn_reset").removeAttr("disabled");
}


function keybnumShow(j)
{
	idElm = j.elm;
	msgBtn = j.title;
	
	$("#kuserNumberTxt").val("").focus().select();

	if(j.bg)
	{
		$(".bg_transp").show();
	}
	
	$("#keynum").show();

	$("#titlekeyNum").html(j.title);
}

function setBtn()
{
	valKbN = $('#kuserNumberTxt').val(); 

	if(!valKbN || valKbN == 0)
	{
		alert("Numero invalido.");

		return false;
	}
	
	$(idElm).val(valKbN);
	$(idElm + "div").html(msgBtn + " <b>" + valKbN + "</b>");
	valKbN = 0;
	keybnumHide();
}

function keybnumHide()
{
	$(".bg_transp").hide();
	$("#keynum").hide();
}

</script>

<div class="bg_transp" style="opacity: 0.9; display: none; position: fixed; width: 100%; height: 100%; background-color: white; top: 0; left: 0; z-index: 998;"></div>

<div class="ui-corner-all" id="keynum" style="width: 400px; left: 50%; margin-left: -200px; display: none; position: fixed; top: 30px; background-color: white; padding: 10px; z-index: 999; border: 1px solid #DFDFDF;">
	<div class="ui-corner-bottom" style="position: absolute; margin-left: 360px; margin-top: -10px; padding: 5px; background: #DFDFDF;">
		<a href="#" onclick="$('.bg_transp').hide(); $('#keynum').hide();" style="color: white; font-size: 14px; padding: 10px; text-decoration: none;;">
			<b>X</b>
		</a>
	</div>
	<div id="titlekeyNum" class="ui-widget ui-corner-all" style="text-align: center; font-size: 22px;"></div>
	<hr />
	<table border="0" id="keyNumTab" cellpadding="0" cellspacing="3" style="text-align: center; font-size: 40px;">
		<tr>
			<td>
				<input type="button" value="1" onclick="addNumB(1)">
			</td>
			<td>
				<input type="button" value="2" onclick="addNumB(2)">
			</td>
			<td>
				<input type="button" value="3" onclick="addNumB(3)">
			</td>
		</tr>
		<tr>
			<td>
				<input type="button" value="4" onclick="addNumB(4)">
			</td>
			<td>
				<input type="button" value="5" onclick="addNumB(5)">
			</td>
			<td>
				<input type="button" value="6" onclick="addNumB(6)">
			</td>
		</tr>
		<tr>
			<td>
				<input type="button" value="7" onclick="addNumB(7)">
			</td>
			<td>
				<input type="button" value="8" onclick="addNumB(8)">
			</td>
			<td>
				<input type="button" value="9" onclick="addNumB(9)">
			</td>
		</tr>
		<tr>
			<td>
				<input type="button" value="">
			</td>
			<td>
				<input type="button" value="0" onclick="addNumB(0)">
			</td>
			<td>
				<input type="button" value="." onclick="addNumB('.')">
			</td>
		</tr>
	</table>
	<hr />
	<table border="0" id="keyNumTab" cellpadding="0" cellspacing="3" width="100%">
		</tr>
		<tr>
			<td style="padding: 0px; margin: 0">
				<button id="btn_reset" style="font-size: 18px; padding: 10px;" onclick="$('#kuserNumberTxt').val('');">
					Apagar
				</button>
			</td>
			<td>
				<input id="kuserNumberTxt" type="text" class="ui-widget ui-corner-all" value="" style="text-align: center; width: 125px; font-size: 24px;" />
				<script>$("#kuserNumberTxt").focus()</script>
			</td>
			<td>
				<button id="btn_ok" onclick="setBtn();" style="font-size: 18px; padding: 10px;">Ok</button>
			</td>
		</tr>
	</table>
</div>

<script>

function addNumB(num){
		var nnTxt = $("#kuserNumberTxt").val() + num;

		$("#kuserNumberTxt").val(nnTxt);
}

</script>